/* vue */
import { defineComponent } from "vue";
/* scss */
import "@src/component/business/BizThemeColor/index.scss";
/* utils */
import { ColorUtilInstance } from '@src/util/business/color';

export default defineComponent({
  name: "BizThemeColor",
  data() {
    return {
      color: null as string | null,
      colorInstance: ColorUtilInstance,
    }
  },
  methods: {
    /**
     * @description 更新主题色
     * @param color 主题色
     * @returns void
    */
    updateThemeColor(color: string) {
      // 如果清空则为默认主题色
      if (color === null) {
        color = '#13c2c2'
      }
      // 更新主题色
      this.color = color
      this.colorInstance.updateThemeColor(color)
    }
  },
  mounted() {
    // 获取当前颜色值
    this.color = this.colorInstance.getThemeColor()
  },
  render() {
    return (
      <el-color-picker
        class="biz-theme-color"
        value={this.color}
        onInput={this.updateThemeColor}
      >
      </el-color-picker>
    )
  }
})